<template>
  <div class="home-list">
    <div class="time">
      <div class="label-title">
        <span class="title">选择时间：</span>
        <el-date-picker
          v-model="times"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="label-title">
        <span class="title">街道镇：</span>
        <el-select v-model="params.town_id" placeholder="请选择">
          <el-option v-for="item in town" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="label-title">
        <span class="title">网格：</span>
        <el-input v-model="params.grid_name" placeholder="请输入所属网格" />
      </div>
      <div class="label-title">
        <span class="title">检查人：</span>
        <el-input v-model="params.check_name" placeholder="请输入检查人" />
      </div>
      <div class="label-title">
        <span class="title">检查时间：</span>
        <el-date-picker
          v-model="params.check_at"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        />
      </div>
      <div class="label-title">
        <span class="title">场所名称：</span>
        <el-input v-model="params.market_name" placeholder="请输入场所名称" />
      </div>
      <div class="label-title">
        <span class="title">场所地址：</span>
        <el-input v-model="params.market_address" placeholder="请输入场所地址" />
      </div>
      <div class="label-title">
        <span class="title">场所类别：</span>
        <el-select v-model="params.market_cate" placeholder="请选择">
          <el-option v-for="item in marketCate" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="label-title">
        <span class="title">场所问题：</span>
        <el-select v-model="params.market_problem_id" placeholder="请选择">
          <el-option v-for="item in marketProblem" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="label-title">
        <span class="title">现场整改：</span>
        <el-select v-model="params.market_status" placeholder="请选择">
          <el-option label="已整改" value="1" />
          <el-option label="未整改" value="2" />
        </el-select>
        <el-button type="primary" @click="search">筛选</el-button>
        <el-button type="primary" @click="download">导出</el-button>

      </div>
    </div>
    <div class="table">

      <el-table
        border
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="town_id"
          align="center"
          label="街道镇"
        >
          <template slot-scope="{row}">
            {{ oldTowns[row.town_id] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="grid_name"
          align="center"
          label="网格"
        />
        <el-table-column
          prop="check_name"
          align="center"
          label="检查人"
        />
        <el-table-column
          prop="check_at"
          align="center"
          label="检查时间"
          width="120"
        />

        <el-table-column
          prop="market_name"
          align="center"
          label="市场名字"
        />
        <el-table-column
          prop="market_address"
          align="center"
          label="市场地址"
          width="200"
        />
        <el-table-column
          prop="market_gps"
          align="center"
          label="手机定位"
          width="200"
        />
        <el-table-column
          prop="market_cate"
          align="center"
          label="场所类别"
          width="200"
        >
          <template slot-scope="{row}">
            {{ oldCate[row.market_cate] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="market_problem_count"
          align="center"
          label="场所问题数"
          width="120"
        />
        <el-table-column
          prop="created_at"
          align="center"
          label="问题"
          width="200"
        >
          <template slot-scope="{row}">
            <div v-for="(item,index) in row.prb" :key="index">{{ item.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="market_status"
          align="center"
          label="现场整改"
        >
          <template slot-scope="{row}">
            <span v-if="row.market_status == 1">已整改</span>
            <span v-if="row.market_status == 2">未整改</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="图像信息"
          width="200"
        >
          <template slot-scope="{row}">
            <div class="thumb">
              <!-- <img v-for="(image, index) in row.images" :key="index" :src="formatFull(image)" alt=""> -->
              <el-image
                v-for="(image, index) in row.images"
                :key="index"
                style="width: 100px; height: 100px"
                :src="formatFull(image)"
                :preview-src-list="previewImages(row.images)"
              />
            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          align="center"
          label="提交时间"
          width="200"
        />
      <!-- <el-table-column
        align="center"
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="{row}">
          <el-button type="text">详情</el-button>
        </template>
      </el-table-column> -->
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { infoList, formConst } from '@/api/user'
import { formatUpyunUrl, exportFile } from '@/utils'
export default {
  data() {
    return {
      times: [],
      town: [],
      marketCate: [],
      marketProblem: [],
      oldTown: {},
      oldCate: {},
      tableData: [],
      total: 0,
      params: {
        town_id: '',
        grid_name: '',
        check_name: '',
        check_at: '',
        market_name: '',
        market_address: '',
        market_cate: '',
        market_problem_id: '',
        market_status: '',
        start_at: '',
        end_at: '',
        page: 1,
        per_page: 7
      }
    }
  },
  computed: {
    formatFull() {
      return function(image) {
        if (image) {
          return formatUpyunUrl(image)
        } else {
          return ''
        }
      }
    },
    previewImages() {
      return function(images) {
        return images.map(item => {
          return formatUpyunUrl(item)
        })
      }
    }
  },
  async created() {
    // this.formConst()
    const data = await formConst()
    const town = data.town
    const marketCate = data.market_cate
    const marketProblem = data.market_problem
    this.oldTowns = JSON.parse(JSON.stringify(data.town))
    this.oldCate = JSON.parse(JSON.stringify(data.market_cate))
    for (const i in data.town) {
      this.town.push({
        label: town[i],
        value: i
      })
    }
    for (const i in marketCate) {
      this.marketCate.push({
        label: marketCate[i],
        value: i
      })
    }
    for (const i in marketProblem) {
      this.marketProblem.push({
        label: marketProblem[i],
        value: i
      })
    }
    marketProblem
    console.log(data, 'data')

    this.init()
  },
  methods: {
  // // 常量
  //   async formConst() {
  //     const data = await formConst()
  //     console.log(data, '常量')
  //   },
    async init() {
      this.params.start_at = this.times[0]
      this.params.end_at = this.times[1]
      const { total, data } = await infoList(this.params)
      this.total = Number(total)
      this.tableData = data.map((item) => {
        return {
          ...item,
          images: item.images || []
        }
      })
      console.log(this.tableData)

      // data.forEach(item => {
      //   item.images && item.images.length && item.images.forEach((value) => {
      //     value = formatUpyunUrl(value, 'full')
      //     console.log(value, 'value')
      //   })
      //   // item.images = item.images || []
      // })
      // for (let i = 0; i < data.length; i++) {
      //   const images = data[i].images || []
      //   for (let j = 0; j < images.length; j++) {
      //     images[j] = formatUpyunUrl(images[j])
      // }
      // }
      // this.tableData = data
      // console.log(data, 'data')

      // console.log(this.tableData, 'data')
    },
    search() {
      if (!this.times) {
        this.times = []
      }
      this.params.page = 1
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.init()
    },
    // 导出
    download() {
      this.$confirm('数据过多将导致导出失败，请注意多使用筛选条件，建议数据最多5000条左右', '提示', {
        confirmButtonText: '我知道了',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = JSON.parse(JSON.stringify(this.params))
        delete params.per_pagex
        exportFile('v1/manage/sars/info/download', params)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>
<style lang="scss">
.home-list {
//  .el-message-box__message p{
//     color: #e92300 !important;
//   }
  .el-message-box__status+.el-message-box__message {
    color: red;
  }
.time {
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  .el-input {
    width: 200px;
  }
  .title {
    margin-left: 20px;
    margin-top: 30px;
    display: inline-block;
  }
  .el-button{
    margin-left: 20px;
  }
}
  .table {
    // padding: 40px;
    padding: 20px;
    box-sizing: border-box;
    // box-sizing: border-box;
    .thumb {
      // display: flex;
      // justify-content: flex-start;
      // flex-wrap: wrap;
      img {
        // width: 80px;
        // height: 80px;
        margin-right: 10px;
      }
    }
  }
  .el-pagination {
    margin-bottom: 20px;
  }
}

</style>
